<!DOCTYPE html>
<html lang="en" xmlns:sa="http://www.thymeleaf.org/extras/sa-token"
      xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

  <!--公共模块-->
  <div th:replace="~{layout}"></div>
<body>
<div class="panel panel-default operation" hidden>
  <div class="panel-heading title"></div>
  <div class="layui-card-body">
    <form class="layui-form " action="" lay-filter="info">
      <input name="id" hidden/>
      <div class="layui-form-item">
        <label class="layui-form-label">车间名称</label>
        <div class="layui-input-block">
          <select id="workshop" name="workshop" lay-filter="select-type"
                  th:with="type=${@sysDictService.getType('workshop')}">
            <option th:each="dict : ${type}" th:text="${dict.label}" th:value="${dict.value}"></option>
          </select>
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">车床编号</label>
        <div class="layui-input-block">
          <select id="machineNumber" name="machineNumber" lay-filter="select-type">
            <option value="0">请选择车间</option>
          </select>
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">客户</label>
        <div class="layui-input-block">
          <input type="custom" name="custom" placeholder="请输入客户" autocomplete="off"
                 class="layui-input disabled">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">规格</label>
        <div class="layui-input-block">
          <input type="specification" name="specification" placeholder="请输入规格" autocomplete="off"
                 class="layui-input disabled">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">重量</label>
        <div class="layui-input-block">
          <input type="weight" name="weight" placeholder="请输入重量" autocomplete="off"
                 class="layui-input disabled">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">批次号</label>
        <div class="layui-input-block">
          <input type="batchNumber" name="batchNumber" placeholder="请输入批次号" autocomplete="off"
                 class="layui-input disabled">
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label">排序</label>
        <div class="layui-input-block">
          <input type="orders" name="orders" placeholder="请输入排序" autocomplete="off"
                 class="layui-input disabled">
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button type="submit" class="layui-btn" lay-submit="" lay-filter="submit">保存</button>
          <button class="layui-btn layui-btn-primary" id="btn_cancel">返回</button>
        </div>
      </div>
    </form>
  </div>
</div>

<div class="table_div">
  <div id="searchParam" sa:hasPermission="workOrder:list">
    <form class="layui-form ">
      <div class="layui-form-item">
        <div class="layui-input-inline" style="width: 200px; padding-right: 30px;">
          <label class="layui-form-label">车间名称</label>
          <div class="layui-input-block" style="width: 120px">
            <select id="workshopSelect" name="workshopSelect" lay-filter="select-type"
                    th:with="type=${@sysDictService.getType('workshop')}">
              <option value="0">请选择车间</option>
              <option th:each="dict : ${type}" th:text="${dict.label}" th:value="${dict.value}"></option>
            </select>
          </div>
        </div>
        <div class="layui-input-inline" style="width: 200px; padding-right: 30px;">
          <label class="layui-form-label">车床编号</label>
          <div class="layui-input-block" style="width: 120px">
            <select id="machineNumberSelect" name="machineNumberSelect" lay-filter="select-type">
              <option value="0">请选择车间</option>
            </select>
          </div>
        </div>
        <div class="layui-input-inline ">
          <button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="data-search-btn"><i
            class="layui-icon"></i> 搜 索
          </button>
        </div>
      </div>
    </form>
  </div>
  <table class="layui-table" id="showTable" lay-filter="showTable"></table>
</div>
<script type="text/html" id="toolbar">
  <div class="layui-btn-container oper">
    <button class="layui-btn layui-btn-sm" lay-event="add" sa:hasPermission="workOrder:add">添加</button>
    <button class="layui-btn layui-btn-sm" lay-event="batchDeleted" sa:hasPermission="workOrder:delete">删除
    </button>
  </div>
</script>
<script type="text/html" id="tool">
  <!--<a class="layui-btn layui-btn-xs" lay-event="look">查看</a>-->
  <a class="layui-btn layui-btn-xs" lay-event="edit" sa:hasPermission="workOrder:update">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" sa:hasPermission="workOrder:delete">删除</a>
</script>

</body>
</html>
<script>
    var machinesData = [(${machines})];

    function changeWorkshop(selectedWorkshop, id) {
        // 基于所选车间过滤机器数据
        var filteredMachines = machinesData.find(function (machineGroup) {
            return machineGroup.workshop === selectedWorkshop;
        }).machines;

        // 清空第二个下拉框
        $('#'+id).empty();

        if (id=="machineNumberSelect"){
            $('#'+id).append($('<option value="0">全部机床</option>'));
        }
        // 填充第二个下拉框
        filteredMachines.forEach(function (machine) {
            $('#'+id).append($('<option>', {
                value: machine,
                text: machine
            }));
        });
    };

    layui.use(function () {
        var table = layui.table;
        var form = layui.form;
        var layer = layui.layer;
        //加载table
        var tableIns1 = table.render({
            elem: '#showTable'
            , contentType: 'application/json'
            , page: true //开启分页
            , url: ctx + 'workOrder/listByPage' //数据接口
            , method: 'POST'
            , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": CoreUtil.isEmpty(res.data) ? 0 : res.data.total, //解析数据长度
                    "data": CoreUtil.isEmpty(res.data) ? null : res.data.records //解析数据列表
                }
            }
            , cols: [
                [
                    {type: 'checkbox', fixed: 'left'},
                    {field: 'id', title: '工作单ID', sort: true},
                    {field: 'workshop', title: '车间名称', sort: true},
                    {field: 'machineNumber', title: '车床编号', sort: true},
                    {field: 'custom', title: '客户', sort: true},
                    {field: 'specification', title: '规格', sort: true},
                    {field: 'weight', title: '重量', sort: true},
                    {field: 'batchNumber', title: '批次号', sort: true},
                    {field: 'orders', title: '排序', sort: true},
                    {width: 120, toolbar: "#tool", title: '操作'}
                ]
            ]
            , toolbar: '#toolbar'
        });


        //表头工具
        table.on('toolbar(showTable)', function (obj) {
            switch (obj.event) {
                case 'batchDeleted':
                    var checkStatus = table.checkStatus(obj.config.id);
                    var data = checkStatus.data;
                    if (data.length == 0) {
                        layer.msg("请选择要批量删除的列");
                    } else {
                        var ids = [];
                        $(data).each(function (index, item) {
                            ids.push(item.id);
                        });
                        tipDialog(ids);
                    }
                    break;
                case 'add':
                    toUnDisabled();
                    $(".table_div").hide();
                    $(".operation").show();
                    $(".title").html("新增");
                    setTimeout(function () {
                        form.val('info', {
                            "test": "test"
                            , "id": ""
                            , "workshop": ""
                            , "machineNumber": ""
                            , "batchNumber": ""
                            , "custom": ""
                            , "specification": ""
                            , "weight": ""
                            , "createdAt": ""
                            , "updatedAt": ""
                            , "orders": ""
                        });
                    }, 200);
                    break;
            }
            ;
        });
        //列操作
        table.on('tool(showTable)', function (obj) {
            var data = obj.data;
            switch (obj.event) {
                case 'del':
                    var ids = [];
                    ids.push(data.id);
                    tipDialog(ids);
                    break;
                case 'look':
                    backshow(data);
                    toDisabled();
                    break;
                case 'edit':
                    backshow(data);
                    $(".title").html("编辑");
                    toUnDisabled();
                    break;
            }
        });

        //删除
        var tipDialog = function (ids) {
            layer.open({
                content: "确定要删除么?",
                yes: function (index, layero) {
                    layer.close(index); //如果设定了yes回调，需进行手工关闭
                    CoreUtil.sendDelete(ctx + "workOrder/delete", ids, function (res) {
                        layer.msg(res.msg, {time: 1000}, function () {
                            tableIns1.reload();
                        });
                    });
                }
            });
        };

        //返回
        $("#btn_cancel").click(function () {
            $(".table_div").show();
            $(".operation").hide();
            return false;
        });

        //监听保存
        form.on('submit(submit)', function (data) {
            if (data.field.id === undefined || data.field.id === null || data.field.id === "") {
                CoreUtil.sendPost(ctx + "workOrder/add", data.field, function (res) {
                    $(".table_div").show();
                    $(".operation").hide();
                    tableIns1.reload();
                });
            } else {
                CoreUtil.sendPut(ctx + "workOrder/update", data.field, function (res) {
                    $(".table_div").show();
                    $(".operation").hide();
                    tableIns1.reload();
                });
            }

            return false;
        });

        // 监听搜索操作
        form.on('submit(data-search-btn)', function (data) {
            //执行搜索重载
            tableIns1.reload({
                page: {
                    curr: 1
                },
                where: {
                    workshop: $('#workshopSelect').val(),
                    machineNumber: $('#machineNumberSelect').val()
                }
            });
            return false;
        });

        // 为特定的 select 元素绑定 change 事件处理器
        var workshopSelect = document.getElementById('workshop');
        var workshopSelect1 = document.getElementById('workshopSelect');


        form.on('select(select-type)', function (data) {
            if (data.elem === workshopSelect||data.elem === workshopSelect1) {
                if (data.elem === workshopSelect){
                  changeWorkshop(data.value,'machineNumber');
                }else if (data.elem === workshopSelect1){
                    changeWorkshop(data.value,'machineNumberSelect');
                }
                form.render('select'); // 仅重新渲染 select 元素
            }
        });

        //回显
        var backshow = function (data) {
            $(".table_div").hide();
            $(".operation").show();
            $(".title").html("查看");
            setTimeout(function () {
                form.val('info', {
                    "test": "test"
                    , "id": data.id
                    , "workshop": data.workshop
                    , "machineNumber": data.machineNumber
                    , "batchNumber": data.batchNumber
                    , "custom": data.custom
                    , "specification": data.specification
                    , "weight": data.weight
                    , "createdAt": data.createdAt
                    , "updatedAt": data.updatedAt
                    , "orders": data.orders
                });
            }, 200);
        }

        //禁用输入
        var toDisabled = function () {
            $(".oper").hide();
            $(".disabled").each(function (index, elem) {
                $(elem).attr("disabled", "")
            })
        }

        //放开输入
        var toUnDisabled = function () {
            $(".oper").show();
            $(".disabled").each(function (index, elem) {
                $(elem).removeAttr("disabled", "")
            })
        }
    });
</script>